<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>范围滑块</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
    <link href="./../../../static/plugins/rangeSlider/css/ion.rangeSlider.min.css" rel="stylesheet" />

   
</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            范围滑块插件 <small>https://github.com/IonDen/ion.rangeSlider</small>
                        </div>
                        <div class="panel-body">
                            <p>
                                基础示例
                            </p>
                            <p>
                                <input id="rangeSlider1" type="text" name="r" value="" />
                            </p>
                            <p>
                                <input id="rangeSlider2" type="text" name="r" value="" />
                            </p>
                            <p>
                                <input id="rangeSlider3" type="text" name="r" value="" />
                            </p>
                            <p>
                                <input id="rangeSlider4" type="text" name="r" value="" />
                            </p>
                            <p>
                                <input id="rangeSlider5" type="text" name="r" value="" />
                            </p>
                            <p>
                                <input id="rangeSlider6" type="text" name="r" value="" />
                            </p>
                            <p>
                                <input id="rangeSlider7" type="text" name="r" value="" />
                            </p>
                            <p>
                                <input id="rangeSlider8" type="text" name="r" value="" />
                            </p>
                            <p>
                                <input id="rangeSlider9" type="text" name="r" value="" />
                            </p>
                            <p>
                                <input id="rangeSlider10" type="text" name="r" value="" />
                            </p>
                            <p>
                                <input id="rangeSlider11" type="text" name="r" value="" />
                            </p>
                            <p>
                                <input id="rangeSlider12" type="text" name="r" value="" />
                            </p>
                            <p>
                                <input id="rangeSlider13" type="text" name="r" value="" />
                            </p>
                            <p>
                                <input id="rangeSlider14" type="text" name="r" value="" />
                            </p>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
    <script src="./../../../static/plugins/rangeSlider/js/ion.rangeSlider.min.js"></script>

    <script>
        $("#rangeSlider1").ionRangeSlider({
            min: 100,
            max: 1000,
            from: 300
        });
        $("#rangeSlider2").ionRangeSlider({
            type: "double",
            grid: true,
            min: 0,
            max: 1000,
            from: 200,
            to: 800,
            prefix: "$"
        });
        $("#rangeSlider3").ionRangeSlider({
            type: "double",
            grid: true,
            min: -1000,
            max: 1000,
            from: -500,
            to: 500
        });
        $("#rangeSlider4").ionRangeSlider({
            type: "double",
            grid: true,
            min: -1000,
            max: 1000,
            from: -500,
            to: 500,
            step: 250
        });
        $("#rangeSlider5").ionRangeSlider({
            type: "double",
            grid: true,
            min: -12.8,
            max: 12.8,
            from: -3.2,
            to: 3.2,
            step: 0.1
        });

        var custom_values = [0, 10, 100, 1000, 10000, 100000, 1000000];

        var my_from = custom_values.indexOf(10);
        var my_to = custom_values.indexOf(10000);

        $("#rangeSlider6").ionRangeSlider({
            type: "double",
            grid: true,
            from: my_from,
            to: my_to,
            values: custom_values
        });

        $("#rangeSlider7").ionRangeSlider({
            grid: true,
            from: new Date().getMonth(),
            values: [
                "一月", "二月", "三月", "四月", "五月", "六月",
                "七月", "八月", "九月", "十月", "十一月", "十二月"
            ]
        });

        $("#rangeSlider8").ionRangeSlider({
            type: "double",
            min: 0,
            max: 1000,
            from: 400,
            to: 600,
            drag_interval: true,
            min_interval: null,
            max_interval: null
        });

        $("#rangeSlider9").ionRangeSlider({
            skin: "big",
            min: 100,
            max: 1000,
            from: 300
        });
        $("#rangeSlider10").ionRangeSlider({
            skin: "flat",
            min: 100,
            max: 1000,
            from: 300
        });
        $("#rangeSlider11").ionRangeSlider({
            skin: "modern",
            min: 100,
            max: 1000,
            from: 300
        });
        $("#rangeSlider12").ionRangeSlider({
            skin: "sharp",
            min: 100,
            max: 1000,
            from: 300
        });
        $("#rangeSlider13").ionRangeSlider({
            skin: "round",
            min: 100,
            max: 1000,
            from: 300
        });
        $("#rangeSlider14").ionRangeSlider({
            skin: "default",
            min: 100,
            max: 1000,
            from: 300
        });


    </script>
</body>

</html>